<template>
    <div>
        <div class="header">
            <img src="../../assets/images/index/logo.png" alt="" />
        </div>
        <div class="content">
            <div class="item" v-for="item in funcList" :key="item.id" @click="linkTo(item.path)">
                <img :src="require('../../assets/images/index/' + item.picName)" alt="" />
                <h3>{{ item.title }}</h3>
                <p>{{ item.subTitle }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            funcList: [
                {
                    id: 0,
                    title: '我的客户',
                    picName: 'wodekehu.png',
                    subTitle: 'MY CLIENTS',
                    path: 'myclients',
                },
                {
                    id: 1,
                    title: '客户关怀',
                    picName: 'kehuguanhuai.png',
                    subTitle: 'CUSTOMER',
                    path: 'customer',
                },
                {
                    id: 2,
                    title: '消息中心',
                    picName: 'xiaoxizhongxin.png',
                    subTitle: 'NEWS',
                    path: 'newscenter',
                },
                {
                    id: 3,
                    title: '发货单',
                    picName: 'wuliudan.png',
                    subTitle: 'LOGISTICS',
                    path: 'logistics',
                },
                {
                    id: 4,
                    title: '物流单',
                    picName: 'wuliudan.png',
                    subTitle: 'LOGISTICS',
                    path: 'wuliudan',
                },
            ],
        };
    },
    methods: {
        linkTo(path) {
            this.$router.push('/' + path);
        },
    },
};
</script>

<style lang="less" scoped>
.header {
    height: 2.28rem;
    width: 100%;
    background-color: #003399;
    text-align: center;
    box-sizing: border-box;
    & > img {
        margin-top: 0.1rem;
        width: 5.72rem;
    }
}
.content {
    padding: 0.55rem 0.98rem 0.85rem;
    height: calc(100% - 2.28rem);
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
        width: 2.67rem;
        height: 3.49rem;
        background-color: #fff;
        margin-bottom: 0.17rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #333;
        box-shadow: 0 0 0.4rem rgba(70, 70, 70, 0.1);
        img {
            width: 0.8rem;
        }
        h3 {
            margin-top: 0.43rem;
            margin-bottom: 0.14rem;
            font-size: 0.28rem;
            font-weight: 700;
        }
        p {
            font-size: 0.18rem;
        }
    }
}
</style>
